<script setup lang="ts">
const props = defineProps({ searchData: Array });
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";

const mainData = ref([]);
//控制主数据长度
const mainIndex = ref(1);
//控制点击更多数据按钮文字
const buttonFont = ref(false);

//vue3自带方法
const router  = useRouter();

const mainDataGet = () => {
  mainData.value = [];
  for (let i = 0; i < 10 * mainIndex.value; i++) {
    mainData.value.push(props.searchData[i]);
  }
};
//控制主数据长度
const mainDataMore = () => {
  buttonFont.value = true;
  setTimeout(() => {
    mainIndex.value += 1;
    mainDataGet();
    buttonFont.value = false;
  }, 2000);
};

const buttonFontChange = computed(() => {
  return buttonFont.value ? "加载中" : "下一页";
});
//检测主要数据和搜索数据长度是否相等
const dataLengthChange = computed(() => {
  return mainData.value.length == props.searchData!.length ? false : true;
});

onMounted(() => {
  mainDataGet();
});
</script>

<template>
  <div class="bist">
    <h1 class="title">
      共找到<span>{{ searchData.length }}</span
      >本书
    </h1>
    <ul>
      <li v-for="(item, index) in mainData" :key="index" @click="router.push('/detail/'+item.sourceUuid)">
        <van-image width="60" height="80" :src="item.coverImage" />
        <div class="font">
          <h1>
            <span>{{ item.title }}</span>
          </h1>
          <span>作者：{{ item.author }}</span>
          <p>{{ item.description }}</p>
        </div>
      </li>
    </ul>
    <div class="button" v-if="dataLengthChange">
      <button @click="mainDataMore">
        {{ (buttonFontChange) }}
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bist {
  & > h1 {
    height: 38px;
    line-height: 38px;
    padding-left: 20px;
    color: #999999;
    font-size: 16px;
    border-bottom: 1px solid #dedede;
    background-color: #fff;
    font-weight: normal;
  }
  ul {
    padding: 0 10px;
    background-color: #fff;
    height: auto;
    li {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #efefef;
    }
  }
  .font {
    width: 80.2%;
    position: relative;
    padding-left: 10px;
    h1 {
      font-weight: normal;
      font-size: 15px;
      color: #333333;
      margin-bottom: 4px;
    }
    & > span {
      font-size: 12px;
      color: #999999;
    }
    p {
      font-size: 12px;
      color: #999999;
      margin-top: 4px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
  }
}
.button {
  margin: 0 auto;
  width: 94.1%;
  margin-top: 10px;
  position: relative;
  &::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 56%;
    transform: translateY(-40%);
    width: 20px;
    height: 11px;
    background: url("/public/img/home/bottom.png") no-repeat;
    background-size: 10px 5px;
    background-position: center center;
  }
  button {
    width: 100%;
    height: 34px;
    border: 1px solid #dcdcdc;
    background-color: #f2f2f2;
    font-size: 16px;
    color: #000;
  }
}
.title {
  span {
    color: #d3270f;
  }
}
</style>